<template>
  <div class="help-page">
    <el-card>
      <div class="section-title">帮助中心</div>
      
      <div class="help-content">
        <!-- 系统概述 -->
        <div class="help-section">
          <h3>系统概述</h3>
          <p>通用后台管理系统是一个基于Vue 3 + Element Plus + .NET Core的现代化管理系统，提供完整的用户权限管理解决方案。</p>
          <div class="feature-highlights">
            <div class="feature-item">
              <el-icon><User /></el-icon>
              <span>用户权限管理</span>
            </div>
            <div class="feature-item">
              <el-icon><Setting /></el-icon>
              <span>角色权限控制</span>
            </div>
            <div class="feature-item">
              <el-icon><Document /></el-icon>
              <span>系统日志记录</span>
            </div>
            <div class="feature-item">
              <el-icon><Monitor /></el-icon>
              <span>系统配置管理</span>
            </div>
          </div>
        </div>

        <!-- 主要功能模块 -->
        <div class="help-section">
          <h3>主要功能模块</h3>
          <div class="module-grid">
            <div class="module-card">
              <h4><el-icon><User /></el-icon> 用户管理</h4>
              <p>管理系统用户账户，包括用户的创建、编辑、删除和状态管理。</p>
              <ul>
                <li>新增用户账户</li>
                <li>编辑用户基本信息</li>
                <li>删除用户账户</li>
                <li>为用户分配角色</li>
                <li>启用/禁用用户状态</li>
                <li>修改用户密码</li>
                <li>上传用户头像</li>
              </ul>
            </div>

            <div class="module-card">
              <h4><el-icon><User /></el-icon> 角色管理</h4>
              <p>管理系统角色，为角色分配权限，实现基于角色的访问控制。</p>
              <ul>
                <li>新增系统角色</li>
                <li>编辑角色信息</li>
                <li>删除角色</li>
                <li>为角色分配权限</li>
                <li>启用/禁用角色</li>
                <li>角色权限预览</li>
              </ul>
            </div>

            <div class="module-card">
              <h4><el-icon><Setting /></el-icon> 权限管理</h4>
              <p>管理系统权限，定义细粒度的操作权限。</p>
              <ul>
                <li>新增权限项</li>
                <li>编辑权限信息</li>
                <li>删除权限</li>
                <li>启用/禁用权限</li>
                <li>权限代码规范</li>
                <li>权限分类管理</li>
              </ul>
            </div>

            <div class="module-card">
              <h4><el-icon><Monitor /></el-icon> 系统管理</h4>
              <p>管理系统配置参数，包括系统设置、参数配置等。</p>
              <ul>
                <li>系统参数配置</li>
                <li>系统信息查看</li>
                <li>配置项管理</li>
                <li>系统状态监控</li>
                <li>参数实时更新</li>
              </ul>
            </div>

            <div class="module-card">
              <h4><el-icon><Document /></el-icon> 系统日志</h4>
              <p>记录和查看系统操作日志，便于问题排查和审计。</p>
              <ul>
                <li>操作日志查看</li>
                <li>系统日志记录</li>
                <li>日志筛选查询</li>
                <li>日志导出功能</li>
                <li>异常日志监控</li>
              </ul>
            </div>

            <div class="module-card">
              <h4><el-icon><User /></el-icon> 个人中心</h4>
              <p>用户个人信息管理，包括资料编辑、头像上传等。</p>
              <ul>
                <li>个人信息查看</li>
                <li>头像上传</li>
                <li>密码修改</li>
                <li>个人中心查看</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 权限代码规范 -->
        <div class="help-section">
          <h3>权限代码规范</h3>
          <p>系统采用统一的权限代码规范，便于权限管理和维护：</p>
          <div class="permission-examples">
            <div class="permission-item">
              <h5>基础权限格式</h5>
              <code>模块.操作</code>
              <p>例如：<code>user.create</code>、<code>user.edit</code>、<code>user.delete</code></p>
            </div>
            <div class="permission-item">
              <h5>资源权限格式</h5>
              <code>模块.操作.资源</code>
              <p>例如：<code>file.download.own</code>、<code>user.avatar.upload</code></p>
            </div>
            <div class="permission-item">
              <h5>管理权限格式</h5>
              <code>模块.管理</code>
              <p>例如：<code>user.manage</code>、<code>permission.manage</code>、<code>system.manage</code></p>
            </div>
          </div>
        </div>

        <!-- 操作指南 -->
        <div class="help-section">
          <h3>操作指南</h3>
          <div class="guide-content">
            <div class="guide-item">
              <h4>用户管理操作</h4>
              <ol>
                <li><strong>新增用户：</strong>点击"新增用户"按钮，填写用户信息，选择角色后保存</li>
                <li><strong>编辑用户：</strong>在用户列表中点击"编辑"按钮，修改信息后保存</li>
                <li><strong>分配角色：</strong>点击"角色"按钮，选择要分配的角色后确认</li>
                <li><strong>删除用户：</strong>点击"删除"按钮，确认后删除用户</li>
              </ol>
            </div>
            <div class="guide-item">
              <h4>角色管理操作</h4>
              <ol>
                <li><strong>新增角色：</strong>点击"新增角色"按钮，填写角色信息后保存</li>
                <li><strong>分配权限：</strong>在角色列表中点击"权限"按钮，选择权限后保存</li>
                <li><strong>编辑角色：</strong>点击"编辑"按钮，修改角色信息后保存</li>
              </ol>
            </div>
            <div class="guide-item">
              <h4>系统配置操作</h4>
              <ol>
                <li><strong>查看配置：</strong>在系统管理页面查看当前配置项</li>
                <li><strong>修改配置：</strong>点击配置项的"编辑"按钮，修改后保存</li>
                <li><strong>新增配置：</strong>点击"新增配置"按钮，添加新的配置项</li>
              </ol>
            </div>
          </div>
        </div>

        <!-- 常见问题 -->
        <div class="help-section">
          <h3>常见问题</h3>
          <div class="faq-content">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="如何修改个人密码？" name="1">
                <p>点击右上角用户头像，选择"修改密码"，输入原密码和新密码后确认即可。</p>
              </el-collapse-item>
              <el-collapse-item title="如何上传头像？" name="2">
                <p>进入"个人中心"页面，点击"更换头像"按钮，选择图片文件上传即可。</p>
              </el-collapse-item>
              <el-collapse-item title="忘记密码怎么办？" name="3">
                <p>请联系系统管理员重置密码，或使用"忘记密码"功能通过邮箱验证重置。</p>
              </el-collapse-item>
              <el-collapse-item title="如何分配用户角色？" name="4">
                <p>在用户管理页面，找到目标用户，点击"角色"按钮，选择要分配的角色后确认。</p>
              </el-collapse-item>
              <el-collapse-item title="权限不足怎么办？" name="5">
                <p>请联系系统管理员为您分配相应的角色和权限。</p>
              </el-collapse-item>
              <el-collapse-item title="如何查看操作日志？" name="6">
                <p>进入"系统日志"页面，可以查看所有操作记录，支持按时间、用户、操作类型筛选。</p>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <!-- 系统信息 -->
        <div class="help-section">
          <h3>系统信息</h3>
          <div class="system-info">
            <div class="info-item">
              <span class="label">系统版本：</span>
              <span class="value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="label">技术栈：</span>
              <span class="value">Vue 3 + Element Plus + .NET Core</span>
            </div>
            <div class="info-item">
              <span class="label">数据库：</span>
              <span class="value">SQL Server / PostgreSQL</span>
            </div>
            <div class="info-item">
              <span class="label">更新时间：</span>
              <span class="value">2025年8月</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  User, 
  Setting, 
  Document, 
  Monitor
} from '@element-plus/icons-vue'

defineOptions({
  name: 'HelpIndex'
})

// 折叠面板激活的名称
const activeNames = ref(['1'])
</script>

<style scoped>
.help-page {
  padding: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #303133;
  text-align: center;
}

.help-content {
  max-width: 1200px;
  margin: 0 auto;
}

.help-section {
  margin-bottom: 40px;
}

.help-section h3 {
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.help-section p {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.help-section ul {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

.help-section li {
  margin-bottom: 8px;
}

.help-section code {
  background-color: #f5f7fa;
  color: #e6a23c;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

/* 功能亮点 */
.feature-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.feature-item .el-icon {
  color: #409eff;
  font-size: 18px;
}

/* 模块网格 */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.module-card {
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.module-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.module-card h4 {
  color: #409eff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-card p {
  margin-bottom: 12px;
  color: #606266;
}

.module-card ul {
  margin: 0;
  padding-left: 16px;
}

.module-card li {
  margin-bottom: 4px;
  font-size: 13px;
}

/* 权限示例 */
.permission-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.permission-item {
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
}

.permission-item h5 {
  color: #409eff;
  margin: 0 0 12px 0;
  font-size: 16px;
}

.permission-item code {
  display: block;
  margin: 8px 0;
  padding: 8px 12px;
  background: #2c3e50;
  color: #ecf0f1;
  border-radius: 4px;
  font-size: 13px;
}

/* 操作指南 */
.guide-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.guide-item {
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
}

.guide-item h4 {
  color: #409eff;
  margin: 0 0 12px 0;
  font-size: 16px;
}

.guide-item ol {
  margin: 0;
  padding-left: 20px;
}

.guide-item li {
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

/* 常见问题 */
.faq-content {
  margin-top: 20px;
}

/* 系统信息 */
.system-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.info-item .label {
  font-weight: 600;
  color: #303133;
}

.info-item .value {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  
  .permission-examples {
    grid-template-columns: 1fr;
  }
  
  .guide-content {
    grid-template-columns: 1fr;
  }
  
  .system-info {
    grid-template-columns: 1fr;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style> 